<!--
 * @Description: 选择填报方式弹窗
 * @Author: chenju
 * @Date: 2022-03-22 16:17:19
 * @LastEditors: qingyang
 * @LastEditTime: 2023-06-26 11:14:34
-->
<template>
  <BaseDialog
    title=""
    append-to-body
    destroy-on-close
    :width="isWholeVehicle ? 764 : 524"
    :close-on-click-modal="false"
    v-model:visible="dialogVisible"
    :loading="loading"
  >
    <div class="model-fill-type-dialog__container">
      <div class="container__header g-flex-center-center--column">
        <span class="g-font-18n1b">选择填报方式</span>
        <span class="g-font-14n2 g-mt4">选择其中一种方式进行填报，选择后不可修改</span>
      </div>
      <div class="container__body g-flex-between-center">
        <div
          class="body-item g-flex-start-center--column"
          :class="localFillType === ModelMethodEnum.BOM_TREE ? 'body-item--active' : ''"
          @click="handleClick(ModelMethodEnum.BOM_TREE)"
        >
          <span class="g-font-16n1b g-mb26">{{ ModelFillTypeCnEnum.BOM_TREE }}</span>
          <div class="body-item-middle g-flex-center-center">
            <img src="@/assets/images/model-fill-type_01.png" />
          </div>
          <span class="g-font-12n3-2 g-mt18"
            >通过创建BOM树形结构的方式进行数据填报，支持导入BOM</span
          >
        </div>
        <!-- <div
          class="body-item g-flex-start-center--column"
          :class="localFillType === ModelMethodEnum.GRAPH ? 'body-item--active' : ''"
          @click="handleClick(ModelMethodEnum.GRAPH)"
        >
          <span class="g-font-16n1b g-mb26">{{ ModelFillTypeCnEnum.GRAPH }}</span>
          <div class="body-item-middle g-flex-center-center">
            <img src="@/assets/images/model-fill-type_02.png" />
          </div>
          <span class="g-font-12n3-2 g-mt18">供应链和生产阶段数据采用流程图式进行创建和填报</span>
        </div> -->
        <div
          v-if="isWholeVehicle"
          class="body-item g-flex-start-center--column"
          :class="localFillType === ModelMethodEnum.AUTO_BOM ? 'body-item--active' : ''"
          @click="handleClick(ModelMethodEnum.AUTO_BOM)"
        >
          <span class="g-font-16n1b g-mb26">{{ ModelFillTypeCnEnum.AUTO_BOM }}</span>
          <div class="body-item-middle g-flex-center-center">
            <img src="@/assets/images/model-fill-type_03.png" />
          </div>
          <span class="g-font-12n3-2 g-mt18"
            >通过对导入的BOM自动进行零部件数据匹配，一键关联中汽研因子的方式实现快速核算</span
          >
        </div>
      </div>
    </div>
    <template #footer>
      <div class="g-flex-center-center g-mb12">
        <el-button type="primary" @click="handleConfirm" :loading="loading">提交选择</el-button>
      </div>
    </template>
  </BaseDialog>
</template>
<script lang="ts">
export default {
  name: 'ModelFillTypeDialog'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, ref, watch, defineExpose } from 'vue';
import { BaseDialog } from '@/components/BaseDialog/index';
import { useMessage } from '@/hooks/useMessage';
import { ModelMethodEnum, ModelFillTypeCnEnum } from '@/constants/enum';
interface ModelFillTypeDialogProps {
  visible: boolean;
  isWholeVehicle: boolean; // 是否是整车
}
const props = withDefaults(defineProps<ModelFillTypeDialogProps>(), {});
const emit = defineEmits(['update:visible', 'confirm', 'refresh']);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
watch(
  () => dialogVisible.value,
  visible => {
    if (visible) {
      init();
    }
  }
);
const loading = ref(false);
const { createMessage } = useMessage();
const localFillType = ref<keyof typeof ModelMethodEnum | ''>(ModelMethodEnum.BOM_TREE);

// 选择填报方式
function handleClick(type: ModelMethodEnum) {
  localFillType.value = type;
}

// 提交
async function handleConfirm() {
  loading.value = true;
  if (!localFillType.value) {
    createMessage.error('请先选择填报方式');
    return;
  }
  emit('confirm', localFillType.value);
}

function hideLoading() {
  loading.value = false;
}

// 初始化
function init() {
  loading.value = false;
  localFillType.value = ModelMethodEnum.BOM_TREE;
}

defineExpose({
  hideLoading
});
</script>
<style lang="scss" scoped>
.model-fill-type-dialog__container {
  .container__header {
    margin-top: -56px;
    width: 100%;
    height: 120px;
  }
  .container__body {
    padding: 0 12px;
    .body-item {
      padding: 28px 25px 0;
      width: 220px;
      height: 240px;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e4e7ed;
      text-align: center;
      cursor: pointer;
      .body-item-middle {
        width: 100%;
        height: 56px;
        img {
          width: 56px;
          height: 56px;
        }
      }
      &:hover {
        background: #f6f9fa;
      }
      &.body-item--active {
        background: #f6f9fa;
        border-color: #489375;
      }
      &.body-item--disabled {
        background: #fff;
        cursor: not-allowed;
        &:hover {
          background: #fff;
        }
      }
    }
  }
}
</style>
